<!-- 服务器配置文件 gui 我的世界 bds -->
<template>
    <div style="margin: 0 0 20px;">
        <n-button type="primary" size="small" @click="handleValidateButtonClick">
            <template #icon>
                <i class="iconfont icon-zhengque"></i>
            </template>
            保存
        </n-button>
    </div>


    <n-form ref="formRef" :inline="false" :model="formValue" :rules="rules" size="small">

        <n-form-item path="server-name" label="服务器名字">
            <n-input placeholder="请输入服务器名字" v-model:value="formValue['server-name']">
                <template #prefix>
                    <i class="iconfont icon-bianji0"></i>
                </template>
            </n-input>
        </n-form-item>

        <n-form-item path="level-name" label="使用的存档名">
            <n-input-group>
                <n-input placeholder="请输入使用的存档名" v-model:value="formValue['level-name']">
                    <template #prefix>
                        <i class="iconfont icon-peishushuju"></i>
                    </template>
                </n-input>
                <n-input-group-label>不存在会新建</n-input-group-label>
            </n-input-group>
        </n-form-item>

        <n-form-item path="gamemode" label="服务器模式">
            <template #label>
                <i class="iconfont icon-GAME"></i>
                服务器模式
            </template>
            <n-radio-group v-model:value="formValue.gamemode">
                <n-radio-button value="survival" label="生存" />
                <n-radio-button value="creative" label="创造" />
                <n-radio-button value="adventure" label="冒险" />
            </n-radio-group>
        </n-form-item>


        <n-form-item path="difficulty" label="游戏难度">
            <template #label>
                <i class="iconfont icon-shanglou"></i>
                游戏难度
            </template>
            <n-radio-group v-model:value="formValue.difficulty">
                <n-radio-button value="easy" label="简单" />
                <n-radio-button value="normal" label="普通" />
                <n-radio-button value="hard" label="困难" />
            </n-radio-group>
        </n-form-item>

        <n-form-item path="allow-cheats" label="允许作弊">
            <template #label>
                <i class="iconfont icon-liuliangfanzuobi"></i>
                允许作弊
            </template>
            <n-radio-group v-model:value="formValue['allow-cheats']">
                <n-radio-button value="true" label="开启" />
                <n-radio-button value="false" label="关闭" />
            </n-radio-group>
        </n-form-item>

        <n-form-item path="max-players" label="最大玩家人数">
            <template #label>
                <i class="iconfont icon-renshu"></i>
                最大玩家人数:（{{ formValue['max-players'] }}）
            </template>
            <n-slider v-model:value="formValue['max-players']" :step="1" :min="1" :max="1000"></n-slider>
        </n-form-item>

        <n-form-item path="online-mode" label="在线模式">
            <template #label>
                <i class="iconfont icon-online"></i>
                在线模式
            </template>
            <n-radio-group v-model:value="formValue['online-mode']">
                <n-radio-button value="true" label="开启" />
                <n-radio-button value="false" label="关闭" />
            </n-radio-group>
        </n-form-item>

        <n-form-item path="allow-list" label="允许名单（白名单）">
            <template #label>
                <i class="iconfont icon-baimingdan"></i>
                允许名单（白名单）
            </template>
            <n-radio-group v-model:value="formValue['allow-list']">
                <n-radio-button value="true" label="开启" />
                <n-radio-button value="false" label="关闭" />
            </n-radio-group>
        </n-form-item>

        <n-form-item path="server-port4" label="服务器端口（ipv4）">
            <n-input size="medium" placeholder="请输入服务器端口" v-model:value="formValue['server-port']">
                <template #prefix>
                    <i class="iconfont icon-wangluoduankou"></i>
                </template>
            </n-input>
        </n-form-item>

        <n-form-item path="server-port6" label="服务器端口（ipv6）">
            <n-input size="medium" placeholder="请输入服务器端口ipv6" v-model:value="formValue['server-portv6']">
                <template #prefix>
                    <i class="iconfont icon-wangluoduankou"></i>
                </template>
            </n-input>
        </n-form-item>


        <n-form-item path="view-distance" label="可视距离">
            <n-input-group>
                <n-input size="medium" placeholder="请输入可视距离" v-model:value="formValue['view-distance']">
                    <template #prefix>
                        <i class="iconfont icon-100"></i>
                    </template>
                </n-input>
                <n-input-group-label>建议不要太大</n-input-group-label>
            </n-input-group>
        </n-form-item>

        <n-form-item path="player-idle-timeout" label="玩家挂机时间">
            <n-input-group>
                <n-input size="medium" placeholder="请输入玩家挂机时间" v-model:value="formValue['player-idle-timeout']">
                    <template #prefix>
                        <i class="iconfont icon-yuandixiadun"></i>
                    </template>
                </n-input>
                <n-input-group-label>0无限,其它到时将被踢出(分钟)</n-input-group-label>
            </n-input-group>
        </n-form-item>

        <n-form-item path="level-seed" label="地图种子">
            <n-input size="medium" placeholder="请输入地图种子" v-model:value="formValue['level-seed']">
                <template #prefix>
                    <i class="iconfont icon-emizhongzi"></i>
                </template>
            </n-input>
        </n-form-item>

        <n-form-item path="default-player-permission-level" label="默认玩家权限级别">
            <template #label>
                <i class="iconfont icon-permissions"></i>
                默认玩家权限级别
            </template>
            <n-radio-group v-model:value="formValue['default-player-permission-level']">
                <n-radio-button value="visitor" label="游客" />
                <n-radio-button value="member" label="成员" />
                <n-radio-button value="operator" label="管理员" />
            </n-radio-group>
        </n-form-item>

        <n-form-item path="texturepack-required" label="强制使用(Addon)">
            <template #label>
                <i class="iconfont icon-chajiancanshupeizhi"></i>
                强制使用(Addon)
            </template>
            <n-radio-group v-model:value="formValue['texturepack-required']">
                <n-radio-button value="true" label="开启" />
                <n-radio-button value="false" label="关闭" />
            </n-radio-group>
        </n-form-item>


    </n-form>
</template>
  
<script setup>
import { ref, reactive, toRaw } from 'vue';
import { useMessage } from "naive-ui";

const emits = defineEmits(['result']);

const props = defineProps({
    config: Object
});

const message = useMessage();
const formRef = ref(null);
let formValue = reactive(props.config);//配置的变量
const rules = {
    'server-name': {
        required: true,
        message: "请输入正确的服务器名字",
        trigger: ["input", "blur"]
    },
    'level-name': {
        required: true,
        message: "请输入正确的存档名",
        trigger: ["input", "blur"]
    },
    'gamemode': {
        required: true,
        message: "请选择游戏模式",
        trigger: ["change"]
    },
    'difficulty': {
        required: true,
        message: "请选择游戏难度",
        trigger: ["change"]
    },
    'allow-cheats': {
        required: true,
        message: "请选择是否开启作弊",
        trigger: ["change"]
    },
    'max-players': {
        required: true
    },
    'online-mode': {
        required: true,
        message: "请选择是否开启在线模式",
        trigger: ["change"]
    },
    'allow-list': {
        required: true,
        message: "请选择是否开启允许名单",
        trigger: ["change"]
    },
    'server-port': {
        required: true,
        validator(rule, value) {
            if (value === '') {
                return new Error("请输入正确的服务器端口");
            } else if (!/^\d*$/.test(value)) {
                return new Error("服务器端口应该为整数");
            }
            return true;
        },
        trigger: ["input", "blur"]
    },
    'server-portv6': {
        required: true,
        validator(rule, value) {
            if (value === '') {
                return new Error("请输入正确的服务器端口");
            } else if (!/^\d*$/.test(value)) {
                return new Error("服务器端口应该为整数");
            }
            return true;
        },
        trigger: ["input", "blur"]
    },
    'view-distance': {
        required: true,
        validator(rule, value) {
            if (value === '') {
                return new Error("请输入正确的可视距离");
            } else if (!/^\d*$/.test(value)) {
                return new Error("可视距离应该为整数");
            }
            return true;
        },
        trigger: ["input", "blur"]
    },
    'player-idle-timeout': {
        required: true,
        validator(rule, value) {
            if (value === '') {
                return new Error("请输入正确的玩家挂机时间");
            } else if (!/^\d*$/.test(value)) {
                return new Error("玩家挂机时间应该为整数");
            }
            return true;
        },
        trigger: ["input", "blur"]
    },
    'level-seed': {
        required: false,
        message: "请输入正确的地图种子",
        trigger: ["input", "blur"]
    },
    'default-player-permission-level': {
        required: true,
        message: "请选择默认玩家权限级别",
        trigger: ["change"]
    },
    'texturepack-required': {
        required: true,
        message: "请选择是否开启强制使用",
        trigger: ["change"]
    },
};//配置的监测规则


function handleValidateButtonClick() {
    formRef.value?.validate((errors) => {
        if (!errors) {
            message.success("保存成功");
            emits('result', toRaw(formValue));//传回事件
        } else {
            console.log(errors);
            message.error("请填写正确！");
        }
    });
}

</script>
  
<style lang="scss" scoped></style>